<template>
  <el-table :data="sliceList" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%" stripe>
    <el-table-column prop="date" label="Date" sortable width="250" :formatter="formatter1" />
    <el-table-column prop="name" label="Name" width="250" />
    <el-table-column prop="role" label="Role" width="250" :formatter="formatter2" />
    <el-table-column prop="apply_role" label="Apply-Role" width="250" :formatter="formatter2" />
    <el-table-column prop="apply_status" label="Apply-Status" width="250">
      <template #default="{ row: { apply_status } }">
        <div :class="{ blue: apply_status === 0, green: apply_status === 1, red: apply_status === 2 }">
          {{ apply_status === 0 ? '未审核' : apply_status === 1 ? '已批准' : '已驳回' }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Operation" align="center">
      <template #default="{ row: { id } }">
        <div>
          <el-button type="primary" @click="audit(id, 0)">批准</el-button>
          <el-button type="warning" @click="audit(id, 1)">驳回</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]" :small="false" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper" :total="applyList.length" />
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRef } from 'vue'
import { initAuditData, applyIn } from '@/type/roleApply'
import $http from '@/request/http'
import { ElMessage } from 'element-plus'
import emitter from '@/utils/emitter'

const data = reactive(new initAuditData())
const formatter1 = (row: applyIn) => {
  const dt = new Date(row.date)
  let y = dt.getFullYear()
  let m = padZero(dt.getMonth() + 1)
  let d = padZero(dt.getDate())
  let h = padZero(dt.getHours())
  let mm = padZero(dt.getMinutes())
  let s = padZero(dt.getSeconds())
  return `${y}-${m}-${d} ${h}:${mm}:${s}`
}
function padZero(n: number) {
  return n > 9 ? n : '0' + n
}
const formatter2 = (row: applyIn) => {
  return row.role === 1 ? '管理员' : '员工'
}
//数据获取
async function getRoleApplyList() {
  const { data: res } = await $http.get('api/role/roleapplylist')
  data.applyList = res
}
onMounted(getRoleApplyList)
const applyList = toRef(data, 'applyList')
//分页
const currentPage = ref<number>(1)
const pageSize = ref<number>(5)
const sliceList = computed(() => {
  return applyList.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

async function audit(id: number, type: number) {
  const { data: res } = await $http.post('/api/role/audit/' + id + '/' + type)
  if (res.status === 1) return ElMessage.error(res.message)
  ElMessage.success(res.message)
  getRoleApplyList()
  emitter.emit('updCount')
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 30px;
}
.el-table {
  z-index: 0;
}
.linkto {
  color: #fff;
}
.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: #25b0f3;
}
</style>
